<template>
  <div>
    <basic-container>
      <el-row :span="24">
        <el-col :span="24">
          <div>
            <h3 style="padding-left: 15px">多方面比例图</h3>
            <el-select
              size="mini"
              v-model="value"
              class="select"
              @change="change"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- 支部 -->
            <el-select
              size="mini"
              v-model="branchvalue"
              class="select"
              placeholder="请选择"
              @change="departmentChange"
              v-if="show"
            >
              <el-option
                v-for="item in branchOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <!-- 班级 -->
            <el-select
              size="mini"
              v-model="classValue"
              @change="classChange"
              class="select"
              placeholder="请选择"
              v-if="show1"
            >
              <el-option
                v-for="item in classOptions"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <!-- 年级 -->
            <el-select
              size="mini"
              v-model="yearValue"
              class="select"
              placeholder="请选择"
              v-if="show2"
              @change="yearChange"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col class="height" :span="12">
          <b class="text">寝室等级情况</b>
          <div id="bedroom" class="chart"></div>
        </el-col>
        <el-col class="height" :span="12">
          <b class="text">任职情况</b>
          <div id="job" class="chart"></div>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col class="height" :span="12">
          <b class="text">学科竞赛</b>
          <div id="courseContests" class="chart"></div>
        </el-col>
        <el-col class="height" :span="12">
          <b class="text">文艺获奖</b>
          <div id="culturalActivitiesReward" class="chart"></div>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { Chart, Util } from "@antv/g2";
import {
  byPermission,
  studentYear,
  studentClass,
  bedroomLevel,
  culturalActivitiesReward,
  job,
  courseContests,
} from "../../api/chart/dataAnalysis";

export default {
  name: "spectaculars",
  data() {
    return {
      show: true,
      show1: false,
      show2: true,
      options: [
        {
          value: 1,
          label: "专业",
        },
        {
          value: 2,
          label: "班级",
        },
      ],
      value: "专业",
      branchOptions: [],
      branchvalue: "",
      classOptions: [],
      classValue: "",
      yearOptions: [],
      yearValue: "",
      bedroomCertificate: {
        data: [],
      },
      jobCertificate: {
        data: [],
      },
      courseContestsCertificate: {
        data: [],
      },
      culturalActivitiesRewardCertificate: {
        data: [],
      },
      chart1: {},
      chart2: {},
      chart3: {},
      chart4: {},
    };
  },
  mounted() {
    this.chart1 = new Chart({
      container: "bedroom",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
    this.chart2 = new Chart({
      container: "job",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
    this.chart3 = new Chart({
      container: "courseContests",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
    this.chart4 = new Chart({
      container: "culturalActivitiesReward",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
  },
  created() {
    byPermission().then((res) => {
      this.branchOptions = res.data;
      this.branchvalue = res.data[0].id;
      this.departmentChange(res.data[0].id)
    });
    studentYear().then((res) => {
      this.yearOptions = res.data;
      // this.yearValue = res.data[0];
    });
    studentClass().then((res) => {
      this.classOptions = res.data;
      // this.classValue = res.data[0].className;
    });
  },
  methods: {
    classChange(val) {
      const obj = {
        classId: val,
        isClass: true,
        isDepartment: false,
      };
      bedroomLevel(obj).then((res) => {
        this.bedroomCertificate.data = res.data;
        this.bedroomCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        console.log(this.bedroomCertificate.data);
        this.test1(this.bedroomCertificate.data, this.chart1, "levelName");
      });
      const obj1 = {
        classId: val,
        isClass: true,
        isDepartment: false,
      };
      job(obj1).then((res) => {
        this.jobCertificate.data = res.data;
        this.jobCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.jobCertificate.data, this.chart2, "typeName");
      });
      const obj2 = {
        classId: val,
        isClass: true,
        isDepartment: false,
      };
      courseContests(obj2).then((res) => {
        this.courseContestsCertificate.data = res.data;
        this.courseContestsCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
          res1.grade = res1.typeName.substr(res1.typeName.length - 2, 2);
        });
        this.test2(this.courseContestsCertificate.data, this.chart3);
      });
      const obj3 = {
        classId: val,
        isClass: true,
        isDepartment: false,
      };
      culturalActivitiesReward(obj3).then((res) => {
        this.culturalActivitiesRewardCertificate.data = res.data;
        this.culturalActivitiesRewardCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
          res1.grade = res1.typeName.substr(res1.typeName.length - 2, 2);
        });
        this.test2(this.culturalActivitiesRewardCertificate.data, this.chart4);
      });
    },
    departmentChange(val) {
      this.yearValue = "";
      const obj = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
      };
      console.log(obj);
      bedroomLevel(obj).then((res) => {
        console.log(res);
        this.bedroomCertificate.data = res.data;
        this.bedroomCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.bedroomCertificate.data, this.chart1, "levelName");
      });
      const obj1 = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
      };
      job(obj1).then((res) => {
        this.jobCertificate.data = res.data;
        this.jobCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.jobCertificate.data, this.chart2, "typeName");
      });
      const obj2 = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
      };
      courseContests(obj2).then((res) => {
        this.courseContestsCertificate.data = res.data;
        this.courseContestsCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
          res1.grade = res1.typeName.substr(res1.typeName.length - 2, 2);
        });
        this.test2(this.courseContestsCertificate.data, this.chart3);
      });
      const obj3 = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
      };
      culturalActivitiesReward(obj3).then((res) => {
        this.culturalActivitiesRewardCertificate.data = res.data;
        this.culturalActivitiesRewardCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
          res1.grade = res1.typeName.substr(res1.typeName.length - 2, 2);
        });
        this.test2(this.culturalActivitiesRewardCertificate.data, this.chart4);
      });
    },
    yearChange(val) {
      if (this.branchvalue == null || this.branchvalue == "") {
        this.$message.error("请先选择支部");
        this.yearValue = "";
        return;
      }
      const obj = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        year: val,
      };
      bedroomLevel(obj).then((res) => {
        console.log(res.data);
        this.bedroomCertificate.data = res.data;
        this.bedroomCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.bedroomCertificate.data, this.chart1, "levelName");
      });
      const obj1 = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        year: val,
      };
      job(obj1).then((res) => {
        this.jobCertificate.data = res.data;
        this.jobCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.jobCertificate.data, this.chart2, "typeName");
      });
      const obj2 = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        year: val,
      };
      courseContests(obj2).then((res) => {
        this.courseContestsCertificate.data = res.data;
        this.courseContestsCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
          res1.grade = res1.typeName.substr(res1.typeName.length - 2, 2);
        });
        this.test2(this.courseContestsCertificate.data, this.chart3);
      });
      const obj3 = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        year: val,
      };
      culturalActivitiesReward(obj3).then((res) => {
        this.culturalActivitiesRewardCertificate.data = res.data;
        this.culturalActivitiesRewardCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
          res1.grade = res1.typeName.substr(res1.typeName.length - 2, 2);
        });
        this.test2(this.culturalActivitiesRewardCertificate.data, this.chart4);
      });
    },
    change() {
      if (this.value === 1) {
        this.yearValue = "";
        this.branchvalue = "";
        this.show = true;
        this.show1 = false;
        this.show2 = true;
      } else {
        this.show1 = true;
        this.show = false;
        this.show2 = false;
      }
    },
    test1: function (obj, res, name) {
      const data = obj;
      let chart = res;
      chart.data(data);
      chart.coordinate("theta", {
        radius: 0.75,
      });
      chart.tooltip({
        showMarkers: false,
      });
      const interval = chart
        .interval()
        .adjust("stack")
        .position("nums")
        .color(name, [
          "#37a1db",
          "#32c4e9",
          "#66dfe2",
          "#9fe5b8",
          "#fedb5b",
          "#ff9f7f",
          "#fb7194",
          "#e061ae",
          "#e68fd0",
          "#e7bcf2",
        ])
        .style({ opacity: 0.4 })
        .state({
          active: {
            style: (element) => {
              const shape = element.shape;
              return {
                matrix: Util.zoom(shape, 1.1),
              };
            },
          },
        })
        .label("reward", () => {
          return {
            offset: -30,
            style: {
              fill: "white",
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: "rgba(0, 0, 0, .45)",
            },
            content: (obj) => {
              if (name == "levelName") {
                return obj.levelName + "\n" + obj.percent + "%";
              }
              if (name == "typeName") {
                return obj.typeName + "\n" + obj.percent + "%";
              }
            },
          };
        });
      console.log(interval);

      chart.interaction("element-single-selected");
      chart.render();
    },
    test2: function (obj, res) {
      const data = obj;
      let chart = res;
      chart.data(data);
      chart.scale("nums", {
        nice: true,
      });
      chart.tooltip({
        showMarkers: false,
        shared: true,
      });
      chart.legend(false);
      chart
        .interval()
        .position("upperLevel*nums")
        .color("grade" ,[
          "#32c4e9",
          "#66dfe2",
          "#9fe5b8",
        ])
        .adjust([
          {
            type: "dodge",
            marginRatio: 0,
          },
        ]);

      chart.interaction("element-highlight-by-x");
      chart.render();
    },
  },
};
</script>

<style scoped>
.select {
  margin: 10px;
}
.text {
  margin: 40px;
}
.height {
  height: 450px;
}
</style>